<template>
    <div>
        <div class="buy-info" v-show="this.buyInfo.length!=0">
            <nav-bar :back="backChange">{{buyInfo.nm}}</nav-bar>
            <!-- 影片详情 -->
            <movie-detail   :movieDetail="buyInfo"></movie-detail>

            <!-- 影院筛选 -->
            <van-tabs @click="onClick" sticky swipe-threshold="3">
                <van-tab v-for="item in showDays" :key="item.date" :name="item.date" :title="item.date" color>
                    <!-- 下拉菜单 -->
                    <van-dropdown-menu  active-color="#ee0a24" sticky>
                        <!-- 全城 -->
                        <van-dropdown-item title="全城" ref="item">
                            <van-tabs>
                                <van-tab title="商区">
                                    <van-tree-select 
                                        :items="districts" 
                                        :active-id.sync="activeId" 
                                        :main-active-index.sync="activeIndex">
                                    </van-tree-select>
                                </van-tab>
                                <van-tab title="地铁站" >
                                    <van-tree-select 
                                        :items="subways"
                                        :active-id.sync="activeId" 
                                        :main-active-index.sync="activeIndex">
                                    </van-tree-select>
                                </van-tab>
                            </van-tabs>
                        </van-dropdown-item>
                        <!-- 品牌 -->
                        <van-dropdown-item title="品牌" ref="item" :options="brands" v-model="value" @change="onChange"></van-dropdown-item>
                        <!-- 筛选 -->
                        <van-dropdown-item title="筛选" ref="item">
                            <div class="screen">
                                <cinema-screen :screenData="services" :changes="serviceChange"></cinema-screen>
                                <cinema-screen :screenData="hallTypes" :changes="hallChange"></cinema-screen>
                            </div>

                            <!-- <div class="special-btn">
                                <span class="btn border-half-px" @click="btn()">重置</span>
                                <span class="btn define-btn">确定</span>
                            </div> -->
                        </van-dropdown-item>
                    </van-dropdown-menu>
                    
                    <!-- 当天影院列表 -->
                    <cinema-list :cinemas="cinemaList"></cinema-list>
                    <div class="no-cinema" v-show="noChange===true">
                        <div class="no-img"></div>
                        <div class="no-cinema-tip">暂无符合条件的影院</div>
                    </div>
                    
                </van-tab>
            </van-tabs>
        </div>

        <!-- loading -->
        <van-loading size="30px"  v-show="this.buyInfo.length==0" color="#f03d37">加载中...</van-loading>
        <!-- <van-loading size="30px"  v-show="this.cinemaList.length==0" color="#f03d37">加载中...</van-loading> -->
    </div>
</template>

<script>
// 引入navbar插槽
import NavBar from '@/components/NavBar.vue'
// 引入电影详情组件
import MovieDetail from '@/components/MovieDetail.vue'
// 引入筛选组件
import CinemaScreen from '@/components/CinemaScreen.vue'

import CinemaList from '@/components/CinemaList.vue'
import { mapState , mapMutations } from 'vuex'

export default {
    props:{
        
    },
    data(){
        return{
            backChange:true,
            noChange:false,
            mid:this.$route.params.mid,
            buyInfo:[],
            showDays:[],
            cinemaList:[],
            dates:null,
            
            
            // CinemaScreen组件传值数据
            hallChange:'hall',
            serviceChange:'service',

            // 筛选影院所需参数
            brandsId:-1,
            serviceIds:-1,
            hallTypeIds:'all',
            date:this.$store.state.time,


            // vuex state的数据
            cid:this.$store.state.city.id,
            lat:this.$store.state.city.position.lat,
            lng:this.$store.state.city.position.lng,
            


            // vant组件数据
            value: 0,
            activeId: 1,
            activeIndex: 0,
            // titles:"",

            brands:[],
            districts:[],
            subways:[],
            hallTypes:[],
            services:[],
        }
    },
    created(){
        this.getBuyInfo()
        this.getShowDays()
        this.getfilterCinemas()
        this.getCinemaList()
    },
    methods:{
        async getBuyInfo(){
            let res=await this.axios.get('movie/intro?movieid='+this.mid)
            this.buyInfo=res.movie
            // console.log(this.buyInfo)
        },
        async getShowDays(){
            let res=await this.axios.get('movie/showdays?movieId='+this.mid+'&cityId='+this.cid)
            this.showDays=res.dates
            // console.log(this.showDays)
            this.dates=this.showDays[0].date
            // console.log(this.dates)
            // 获取电影上映日期的同时页获取当天上映的影院列表
            // this.getCinemaList(this.dates)
        },
        async getfilterCinemas(){
            let res=await this.axios.get('index/filterCinemas?ci='+this.cid)
            // console.log(res)

            // 地铁站数据
            let subway=res.subway.subItems
            this.subways=subway.map((item) => {
                item={
                    text:item.name+'('+item.count+')',
                    dot:false,
                    className: 'my-class',
                    children:item.subItems.map((ele) => {
                        item={
                            text:ele.name,
                            id:ele.id
                        }
                        return item
                    }),
                }
                return item
            });
            // 地区数据
            let district=res.district.subItems
            this.districts=district.map((item) => {
                item={
                    text:item.name+'('+item.count+')',
                    dot:false,
                    className: 'my-class',
                    children:item.subItems.map((ele) => {
                        item={
                            text:ele.name,
                            id:ele.id
                        }
                        return item
                    }),
                }
                return item
            });

            // 品牌数据
            let brand=res.brand.subItems
            this.brands=brand.map((item,index) => {
                brand={
                    text:item.name+'('+item.count+')',
                    value:index,
                    id:item.id
                }
                return brand
            })
            
            // 影院类型
            this.hallTypes=res.hallType
            // 影院服务
            this.services=res.service
        },
        async getCinemaList(){
            let res=await this.axios.get('movie/select/cinemas?limit=20&offset=0&client=iphone&channelId=4&showDate='+this.date+'&movieId='+this.mid+'&sort=distance&cityId='+this.cid+'&lat='+this.lat+'&lng='+this.lng+'&districtId=-1&lineId=-1&areaId=-1&stationId=-1&brandIds=['+this.brandsId+']&serviceIds=['+this.serviceIds+']&hallTypeIds=["'+this.hallTypeIds+'"]&languageIds=%5B%22all%22%5D&dimIds=%5B%22all%22%5D')
            // console.log(res)
            this.cinemaList=res.cinemas
            // console.log(this.cinemaList)
            // console.log(this.cinemaList.length==0)
            if(this.cinemaList.length==0){
                this.noChange=true
            }else{
                this.noChange=false
            }
        },
        btn(){
            
        },
        // 根据上映日期筛选影院
        onClick(name,title){
            // console.log(name,title,this.cid);
            this.date=title
            this.getCinemaList()
        },
        // 根据影院品牌筛选影院
        onChange(){
            // console.log(this.value)
            this.brandsId=this.brands[this.value].id
            // console.log(this.brandsId)
            this.getCinemaList()
        },
        ...mapMutations(['service','hallType'])
    },
    components:{
        NavBar,
        MovieDetail,
        CinemaScreen,
        CinemaList,
    },
    computed:{
        ...mapState(["city","time",'servicesId','hallTypesId'])
    },
    beforeRouteLeave(to,from,next){
        this.serviceIds=-1;
        this.hallTypeIds='all';
        this.service(this.serviceIds)
        this.hallType(this.hallTypeIds)
        next()
    },
    watch:{
        serviceIds:{
            // immediate:true,
            handler:'getCinemaList'
        },
        hallTypeIds:{
            // immediate:true,
            handler:'getCinemaList'
        },
        '$store.state.servicesId'(){
            this.serviceIds=this.$store.state.servicesId
        },
        '$store.state.hallTypesId'(){
            this.hallTypeIds=this.$store.state.hallTypesId
        },
    }
}
</script>

<style lang="less" scoped>
/deep/ .van-loading{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  // transform: translateY(-50%);
}
.screen{
    min-height: 150px;
    max-height: 381px;
    overflow: overlay;
}
.special-btn{
    position: fixed;
    left: 0px;
    bottom: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    height: 56px;
    width: 100%;
    background: #fff;
    .btn{
        display: inline-block;
        height: 34px; 
        width: 67px;
        margin-left: 12px;
        margin-top: 11px;
        text-align: center;
        line-height: 34px;
        font-size: 14px;
        color: #666;
        &::after{
            content: "";
            position: absolute;
            width: 200%;
            height: 200%;
            top: 0;
            left: 0;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            border: 1px solid #e5e5e5;
            -webkit-transform: scale(.5);
            transform: scale(.5);
            border-radius: 6px;
            box-sizing: border-box;
            pointer-events: none;
        }
    }
    .border-half-px{
        position: relative;
    }
    .define-btn{
        margin-right: 12px;
        background: #dd403b;
        border-radius: 3px;
        color: #fff;
    }
}
.no-cinema{
    width: 50%;
    padding: 20% 25%;
    background: #f8f8f8;
    .no-img{
        width: 40%;
        height: 86px;
        margin: auto;
        background: url('../assets/img/nothing.png');
        background-size: 100% 100%;
    }
    .no-cinema-tip{
        margin-top: 10px;
        text-align: center;
        color: #666;
    }
}

// 以下为vant2组件的样式穿透
/deep/ .van-overlay{
    position: relative;
}
/deep/ .van-tab{
    width: 115px;
    margin-left: 4.5px;
    padding: 0px;
}
/deep/ .van-tabs__line {
    bottom: 0px;
    width: 115px;
    height: 1px;
}
/deep/ .van-tabs__nav--line {
    padding-bottom: 0px;
} 
/deep/ .van-dropdown-menu__bar{
    height: 40px;
    box-shadow: none;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}
/deep/ .van-tabs__content{
    background: white;
}
/deep/.van-tabs__wrap{
    height: 51px;
    z-index: 5;
}
</style>